<template>
  <div class="app">
    <h2>我是App组件</h2>
    <!--Suspense： 等待异步组件时渲染一些额外内容，让应用有更好的用户体验 -->
    <Suspense>
      <template v-slot:default>
        <!-- 组组件包含异步任务，可能需要很长事件才能返回 -->
        <Child />
      </template>
      <!-- 在一部任务未返回之前，呈现一部分内容 -->
      <template v-slot:fallback>
        <h2>加载中......</h2>
      </template>
    </Suspense>
  </div>
</template>

<script setup lang="ts" name="App">
import { Suspense } from 'vue'
import Child from './Child.vue'
</script>

<style>
.outer {
  background-color: #ddd;
  border-radius: 10px;
  padding: 5px;
  box-shadow: 0 0 10px;
  width: 400px;
  height: 400px;
}
img {
  width: 180px;
}
</style>
